<template>
	<view class="setpass">
		<HeaderBar title="修改密码" showBack backgroundColor="#F6F6F6" fixed />

		<view class="contentBox">
			<!-- <form @submit="formSubmit" @reset="formReset"> -->
			<view class="textarea_box">
				<textarea :placeholder="placeholderText" placeholder-style="color: #B2B2B2;font-size:24upx" class="textarea"
					v-model="textarea" placeholder-class="placeholder" />
				<view class="controls">
					<view class="paste" @tap="pasteText">
						粘贴
					</view>
					<!-- <view class="keypal" v-show="active!=3">
						KeyPal Card
					</view> -->
				</view>
			</view>
			<view class="form-item">
				<view class="title f28">设置密码</view>
				<view class="iptStyle pass-ipt">
					<input class="input" password v-model="newPassword" name="input" placeholder="密码不少于8位(数字字母符号至少两种)"
						placeholder-style="color: #B2B2B2;font-size:24upx" />
				</view>
				<view class="iptStyle confirm-pass-ipt">
					<input class="input" password v-model="rePassword" name="input" placeholder="确认密码"
						placeholder-style="color: #B2B2B2;font-size:24upx" />
				</view>
			</view>
			<view class="btn">
				<view @tap="confirm">
					确认
				</view>
			</view>
			<!-- </form> -->
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				textarea: "",
				newPassword: "",
				rePassword: "",
			}
		},
		computed: {
			addressInfo() {
				return this.$store.getters.addressInfo
			},
			placeholderText() {
				if (this.addressInfo) {
					if (this.addressInfo.mnemonics) {
						return "请输入助记词，并使用空格分隔"
					} else if (this.addressInfo.privateKey) {
						return "明文私钥"
					}
				}
				return ""
			}
		},
		methods: {
			validatePassword(password) {
				const hasUpperCase = /[A-Z]/.test(password); // 是否包含大写字母
				const hasLowerCase = /[a-z]/.test(password); // 是否包含小写字母
				const hasNumbers = /\d/.test(password); // 是否包含数字
				const hasSpecialChars = /[!@#$%^&*(),.?":{}|<>]/.test(password); // 是否包含特殊字符
				const hasNoChineseChars = !/[\u4e00-\u9fa5]/.test(password); // 是否不包含汉字
				const conditionsMet = [hasUpperCase, hasLowerCase, hasNumbers, hasSpecialChars].filter(Boolean).length >=
					2;

				return password.length >= 8 && conditionsMet && hasNoChineseChars;
			},
			pasteText() {
				uni.getClipboardData({
					success: (res) => {
						this.textarea = res.data;
					},
					fail() {}
				});
			},
			confirm() {
				if (!this.textarea) {
					if(this.addressInfo.mnemonics){
						return uni.showToast({
							title: '请输入助记词',
							position: "bottom",
							icon: "none",
							duration: 2000
						});
					}
					if(this.addressInfo.privateKey){
						return uni.showToast({
							title: '请输入私钥',
							position: "bottom",
							icon: "none",
							duration: 2000
						});
					}
					
				}
				if(this.addressInfo.mnemonics&&this.addressInfo.mnemonics.replace(/,/g, ' ')!=this.textarea){
					return uni.showToast({
						title: '助记词有误',
						position: "bottom",
						icon: "none",
						duration: 2000
					});
				}
				if(!this.addressInfo.mnemonics&&this.addressInfo.privateKey&&this.addressInfo.privateKey!=this.textarea){
					return uni.showToast({
						title: '私钥有误',
						position: "bottom",
						icon: "none",
						duration: 2000
					});
				}
				if (!this.validatePassword(this.newPassword)) {
					return uni.showToast({
						title: '密码格式有误',
						position: "bottom",
						icon: "none",
						duration: 2000
					});
				}
				if (this.rePassword != this.newPassword) {
					return uni.showToast({
						title: '两次密码不一致',
						position: "bottom",
						icon: "none",
						duration: 2000
					});
				}
				this.$store.dispatch('updatePass', this.newPassword)
					.then(() => {
						this.$updateWalletInfo()
						uni.showToast({
							title: '修改成功',
							position: "bottom",
							icon: "none",
							duration: 2000
						});
						uni.navigateBack();
					})
					.catch(err => {
						console.error('更新失败', err);
					});

			},
		}
	}
</script>

<style lang="scss" scoped>
	.setpass {
		width: 100%;
		height: 100vh;
		background: #F6F6F6;

		.placeholder {
			font-size: 20upx;
		}


		.contentBox {
			padding: 0 50upx;

			.textarea_box {

				height: 224upx;
				background: #FFF;
				border-radius: 20upx;
				padding: 24upx 26upx;
				margin-top: 40upx;

				.textarea {
					width: 100%;
					height: 188upx;
					box-sizing: border-box;
				}



				.controls {
					display: flex;
					font-size: 26upx;
					line-height: 36upx;
					color: #368521;
					font-weight: 400;
					flex-direction: row-reverse;

					.paste {
						padding: 0 20upx;
					}

					.keypal {
						padding: 0 20upx;
						border-right: 1px solid #D8D8D8;
					}
				}
			}

			.form-item {
				margin-top: 30upx;

				.title {
					font-size: 30upx;
					color: #3D3D3D;
				}

				.f28 {
					font-size: 28upx;
				}

				.iptStyle {
					border-radius: 20upx;
					background-color: #FFFFFF;

					.input {
						padding: 26upx 24upx;
						font-size: 26upx;
					}
				}

				.name-ipt {
					margin-top: 26upx;
				}

				.pass-ipt {
					margin-top: 26upx;
				}

				.confirm-pass-ipt {
					margin-top: 12upx;
				}

			}



			.mt {
				margin-top: 900upx;
			}

			.btn {
				font-size: 26upx;
				color: #F6F6F6;
				line-height: 88upx;
				background: linear-gradient(180deg, #A9E993 0%, #368321 100%);
				border-radius: 10upx;
				text-align: center;
				margin-top: 100upx;
			}
		}
	}
</style>